<template>
  <f-page-layout title="详情布局界面" showBack @back="handleBack" :actions="buttons">
    <div class="category-title">我是分类标题</div>
    <f-descriptions-group v-bind="options"> </f-descriptions-group>
  </f-page-layout>
</template>
<script setup lang="ts">
import { Button, message } from 'ant-design-vue';
import { ref, h } from 'vue';
const buttons = ref([
  {
    label: 'Bordered',
    click: () => {
      options.value.bordered = !options.value.bordered;
    }
  }
]);
const handleBack = () => {
  message.success('back');
};
const options = ref({
  // 对应columns中的field字段，支持 a.b.c 访问属性
  data: {
    boolean: true
  },
  bordered: true,
  columns: [
    {
      title: '分组名称',
      // 1 - 24,下面的列加起来等于此值为一行
      column: 3,
      columns: [
        { span: 24, label: '字段1', field: 'money', formatter: 'money' },
        { span: 2, label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段1', field: 'money', formatter: 'money' },
        { label: '字段2', field: 'boolean', formatter: 'status' },
        { label: '字段3', field: 'a2' },
        { label: '字段4', field: 'a3' },
        { label: '字段4', field: 'a3' }
      ]
    },
    {
      title: '分组-span',
      span: 24,
      style: 'padding-right:6px',
      column: 4,
      columns: [
        { label: '字段', field: 'a' },
        { label: '字段', field: 'a' },
        { label: '字段', field: 'a' },
        { label: '字段', field: 'a' },
        { label: '字段', field: 'a' }
      ]
    },
    {
      title: '分组-span',
      span: 24,
      gutter: 12,
      style: 'padding-left:6px',
      column: 1,
      columns: [
        { label: '字段', field: '' },
        { label: '字段', field: '' },
        { label: '字段', field: '' },
        { label: '字段', field: '' },
        { label: '字段', field: '' }
      ]
    },
    {
      title: '分组-flex',
      flex: '50%',
      gutter: 12,
      column: 1,
      columns: [
        { label: '字段', render: () => h('div', 'flex-200') },
        { label: '字段', render: () => h('div', 'flex-200') },
        { label: '字段', render: () => h('div', 'flex-200') },
        { label: '字段', render: () => h('div', 'flex-200') },
        { label: '字段', render: () => h('div', 'flex-200') }
      ]
    },
    {
      title: '分组-flex',
      flex: 1,
      column: 1,
      columns: [
        { label: '字段', field: '' },
        { label: '字段', field: '' },
        { label: '字段', field: '' },
        { label: '字段', field: '' },
        { label: '字段', field: '' }
      ]
    },
    {
      title: 'group render',
      render: () =>
        h(
          'div' /** 自定义render-content需要加上此class有折叠效果  custom-render-content  */,
          { class: 'px10 pb10 text-primary custom-render-content' },
          ['render content']
        )
    },
    {
      title: 'extra content',
      render: () =>
        h('div', /**  custom-render-content */ { class: 'custom-render-content' }, 'content'),
      extra: h('div', [
        h(Button, { class: 'ml10' }, 'button 1'),
        h(Button, { class: 'ml10' }, 'button 1'),
        h(Button, { class: 'ml10' }, 'button 1')
      ])
    }
  ]
});
</script>
